<div #zoomContainer id="zoom-container"></div>

<div #graphContainer id="graph-container">
  <div class="task"
       *ngFor="let task of tasks; trackBy: trackby"
       [ngClass]="[task.state, task.type]"
       [id]="task.id"
       [routerLink]="['tasks', task.id]"
       [routerLinkActive]="'selected'">

    <div class="task-content d-flex flex-column justify-content-between h-100">
      <div class="task-name" [title]="task.name">{{task.name}}</div>
      <div class="d-flex justify-content-between align-items-baseline">
        <div class="badge task-state mr-auto font-weight-normal" [ngClass]="task.state">{{task.state}}</div>
        <span *ngIf="task.isWorkflow" class="text-muted px-1" title="This task is a sub-workflow"><i class="fa fa-sitemap"></i></span>
      </div>
    </div>
  </div>
</div>